<template>
  <div>
    <!-- 弹出框 -->
    <div class="eject">
      <el-dialog v-model="dialogVisible" :close-on-click-modal="false" :title="title" width="40%"
        :before-close="handleClose">
        <el-form ref="formRef" :model="params" status-icon label-width="100px" class="demo-ruleForm">
          <!-- 班级名称 -->
          <el-form-item :rules="[{ required: true, message: '请输入班级名称' }]" label="班级名称" prop="name">
            <el-input v-model="params.name" style="width: 280px; font-size: 13px" placeholder="请输入班级名称" />
          </el-form-item>
          <!-- 部门 -->
          <el-form-item :rules="[{ required: true, message: '请选择部门名称' }]" label="部门" prop="depid">
            <el-cascader class="linkage" v-model="params.depid" :options="options"
              :props="{ value: 'id', label: 'name' }" clearable @change="handleChange" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancel(formRef)" style="font-size: 13px">取消</el-button>
            <el-button type="primary" @click="submitForm(formRef)" style="font-size: 13px">确定
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref, inject, watchEffect } from "vue";
import type { FormInstance } from "element-plus";

// 引入调接口数据
import { add } from "../../apis/classes/classApi";
// elelment ui 样式
import { ElMessage } from "element-plus";
const formRef = ref<FormInstance>();
const data = reactive({
  params: { id: 0, name: "", depid: [] },
  options: [],
  // 加载
  loading: true,
  // 弹出框
  title: "添加",
  dialogVisible: false,
  // 调接口提示
  tips: "添加成功",
  ruleFormRef: {},
});
// 解构数据
const { dialogVisible, title, options, params, ruleFormRef } = toRefs(data);
// 接收共享数据
const datas: any = inject('data')
// console.log(datas);
const props: any = defineProps({
  editModel: {
    type: Object,
  },
});
// 监听事件
watchEffect(() => {
  data.dialogVisible = datas.dialogVisible;
  data.params.name = props.editModel.name;
  data.params.depid = props.editModel.depid;
  data.options = datas.options;
  data.params.id = datas.editModel.id;
  // 判断
  if (data.params.id) {
    data.title = datas.title;
    data.tips = "修改成功";
  } else {
    data.title = "添加";
    data.tips = "添加成功";
  }
});
// 清空表单方法
const empty = () => {
  datas.dialogVisible = false;
  datas.editModel.id = 0;
  datas.editModel.name = "";
  datas.editModel.depid = [];
}
// 弹出框
const handleClose = () => {
  empty()
};
// 取消
const cancel = (formEl: FormInstance | undefined) => {
  dialogVisible.value = false;
  empty()
};
const handleChange = (e: any) => {
  datas.depid = e;
};
const addClassesApi = async () => {
  const paramsData = {
    ...params.value,
    depid: params.value.depid[params.value.depid.length - 1],
  };
  const res: any = await add(paramsData);
  if (res.errCode === 10000) {
    ElMessage.success(data.tips);
    datas.dialogVisible = false;
    datas.isRefresh = true;
  } else {
    ElMessage.error(res.errMsg);
  }
};
// 添加班级
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      addClassesApi()
    } else {
      return false;
    }
  });
};
</script>
<style scoped lang='less'>
</style>